<template>
    <!-- 用户列表 -->
    <div ref="content" class="box">
        <div class="f-ptb-10">
            <el-button type="primary" @click="opration('add')">添加</el-button>
        </div>

        <div class="table-content" ref="tableContent">
            <el-table
                :data="that.list"
                border
                stripe
                :height="that.tableHeight"
                :header-cell-style="{color: '#606266', backgroundColor: '#f8f8f9', 'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
            >
                <el-table-column type="index" label="序号" width="100" align="center" :index="indexMethod" />
                <el-table-column prop="username" label="标题"></el-table-column>
                <el-table-column prop="createtime" label="权限"></el-table-column>
                <el-table-column prop="createtime" label="封面图片"></el-table-column>
                <el-table-column prop="createtime" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{row}">
                        <span class="blue pointer" @click="opration('edit', row)">修改</span>
                        <el-popconfirm title="确定要删除该用户吗?" @confirm="opration('del', row)">
                            <template #reference>
                                <span class="blue pointer f-ml-20">删除</span>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="table-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="that.page"
                :page-sizes="[10, 20, 50, 100, 200, 500, 800]"
                :page-size="that.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="that.total"
            ></el-pagination>
        </div>
    </div>
</template>

<script setup>
import {reactive, ref, onMounted, onBeforeUnmount, nextTick} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {successDeal, setStore, removeStore, phoneFormat} from '@/utils/utils'
import api from './api/index'
const that = reactive({
    form: {
        level: '',
        keywords: '',
    },
    list: [],

    timeList: [],
    total: 0,
    pageSize: 10,
    page: 1,
    tableHeight: 200,
})

const listTitle = ref()
const content = ref()

const $router = useRouter()

onMounted(() => {
    nextTick(() => {
        listenResizeFn()
    })
    // getList()
    window.addEventListener('resize', listenResizeFn)
})

const listenResizeFn = () => {
    that.tableHeight = content.value.clientHeight - 100
}

//每页条数
const handleSizeChange = () => {
    that.pageSize = val
    getList()
}
//当前第几页
const handleCurrentChange = () => {
    that.page = val
    getList()
}

// 分页索引
const indexMethod = (index) => {
    return (that.page - 1) * that.pageSize + index + 1
}

// 操作
const opration = (name, row) => {
    switch (name) {
        case 'add':
            $router.push('userMangment/add')
            break
        case 'edit':
            $router.push({
                path: 'userMangment/edit',
                query: {
                    id: row.id,
                },
            })
            break
        case 'del':
            console.log(1212)
            api.delUser({id: row.id}).then((res) => {
                successDeal('操作成功！')
                getList()
            })
            break
        case 'recover':
            api.restoreUser({id: row.id}).then((res) => {
                successDeal('操作成功！')
                getList()
            })
            break

        default:
            break
    }
}

// 列表
const getList = (num) => {
    if (num) that.page = 1
    const json = {
        pageSize: that.pageSize,
        page: that.page,
        keywords: that.form.keywords,
        level: that.form.level,
    }
    api.userList(json).then((res) => {
        that.list = res.data.data
        that.total = res.data.total
    })
}
const reSet = () => {}
const exportList = () => {}
const add = () => {}

onBeforeUnmount(() => {
    // 移除绑定的listenResizeFn事件监听
    window.removeEventListener('resize', listenResizeFn)
})
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
.list-title {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 5px;
}

.list-title > div {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    width: 25%;
}
.list-title > div > span:nth-child(1) {
    white-space: nowrap;
    width: 70px;
    text-align: center;
}
.box-dailog {
    height: 70vh;
    padding: 20px;
    overflow-y: scroll;
}
.title {
    font-weight: 700;
    color: #303133;
    font-size: 16px;
    padding: 20px 0;
}
.el-descriptions {
    margin-top: 20px !important;
}
</style>
